<template>
	<view class="cart">
		<view class="cart-num" v-if="cartArr.length !== 0">
			共{{allNum}}件商品
		</view>
		<view class="cart-box" v-if="cartArr.length !== 0">
				<u-checkbox-group @change="onQuanxuan" shape="circle" active-color="#D1AA56">
					<view class="top">
						<u-checkbox v-model="isCheckbox" name="qx"></u-checkbox>
						<text @click="onDel">{{txt_btn}}</text>
					</view>
				</u-checkbox-group>
				<u-checkbox-group shape="circle" active-color="#D1AA56" @change="onChange">
				<view class="goods-list">
					<view class="item" v-for="(item,index) in cartArr[0].cart_item" :key="index">
						<u-checkbox v-model="item.is_chexked" :name="index"></u-checkbox>
						<view class="goods-data">
							<image :src="item.goods_pic" mode=""></image>
							<view class="right">
								<view class="right-top">
									<text>{{item.goods_name}}</text>
								</view>
								<view class="right-center">
									<view class="tag" v-for="(a,numIndex) in item.label_names" :key="numIndex">
										{{a}}
									</view>
								</view>
								<view class="right-btm">
									<view class="price">
										¥{{item.sub_prices}}
									</view>
									<view class="count-box">
										<view class="count-box-left" @click="onSub(index)">
											<u-icon name="minus" color="#666" size="28"></u-icon>
										</view>
										<input type="text" v-model="item.buy_num" :disabled="true" />
										<view class="count-box-right" @click="onAdd(index)">
											<u-icon name="plus" color="#666" size="28"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="bare-cart" v-if="cartArr.length == 0" style="padding-top: 200upx;">
			<u-empty text="当前购物车为空" mode="car" icon-size="200" font-size="32"></u-empty>
		</view>
		<view class="btm-btn"  v-if="cartArr.length !== 0">
			<view class="left">
				<u-checkbox-group @change="onQuanxuan" shape="circle" active-color="#D1AA56">
						<u-checkbox v-model="isCheckbox" name="qx">全选</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="right">
				<view class="right-txt">
					<text>合计：</text>
					<text>¥{{totalPrice}}</text>
				</view>
				<button class="bg-btn" v-if="is_del" @click="onDelGoods">删除</button>
				<button class="bg-btn" v-else @click="goSubmintOrder">结算({{allNum}})</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_num:1,
				isCheckbox:false,
				page:1,
				cartArr:[],
				allNum:0,
				is_del:false,
				txt_btn:'管理',
				totalPrice:0,
				idList:'',
				allId:'',//所有ID
				cartSubmit:'',//多商品预提交
				listOrder:''
			};
		},
		created() {
			this.getCartList()
		},
		methods:{
			// 添加到预订单
			goSubmintOrder(){
				uni.navigateTo({
					url:'../shop/goodsDetail/submitOrder/submitOrder?cartSubmit=' + JSON.stringify(this.cartSubmit) + '&type=2'
				})
			},
			// 删除商品
			onDelGoods(){
				uni.request({
				    url:this.$Url +'/index.php/App/Cart/delGoodsInCart',
				    method:'POST',
				    data:{
				       cart_item_ids:this.idList.toString()
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
							this.getCartList()
							this.isCheckbox = false
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 显示删除商品按钮
			onDel(){
				if (this.is_del == false) {
					this.is_del = true
					this.txt_btn = '管理'
				} else{
					this.is_del = false
					this.txt_btn = '管理'
				}
			},
			// 更改购物车数量
			onCartNum(id,num){
				uni.request({
				    url:this.$Url +'/index.php/App/Cart/modifyGoodsNum',
				    method:'POST',
				    data:{
				       cart_item_id:id,
					   buy_num:num
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.getCartList()
							console.log('添加成功')
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 减少
			onSub(index){
				if(this.cartArr[0].cart_item[index].buy_num > 1){
					this.cartArr[0].cart_item[index].buy_num --
					this.onCartNum(this.cartArr[0].cart_item[index].cart_item_id,this.cartArr[0].cart_item[index].buy_num)
				}else{
					uni.showToast({
						title:'不能再少了',
						icon:'none',
						duration:1200
					})
				}
			},
			// 增加
			onAdd(index){
				this.cartArr[0].cart_item[index].buy_num ++
				this.onCartNum(this.cartArr[0].cart_item[index].cart_item_id,this.cartArr[0].cart_item[index].buy_num)
			},
			// 操作全选复选框
			onQuanxuan(e){
				if(this.isCheckbox){
					this.cartArr[0].cart_item.map(val => {
						val.is_chexked = true;
						this.idList = this.allId
					})
					this.cartSubmit = this.listOrder
				}else{
					this.cartArr[0].cart_item.map(val => {
						val.is_chexked = false;
					})
				}
			},
			// 操作复选框
			onChange(e){
				this.isCheckbox = false
				let idArr = []
				let cartSubmit = []
				let obj = {}
				for (let i = 0; i < e.length; i++) {
					idArr.push(this.cartArr[0].cart_item[i].cart_item_id)
					cartSubmit.push({
						cart_item_id:this.cartArr[0].cart_item[i].cart_item_id,
						goods_num:this.cartArr[0].cart_item[i].buy_num
					})
				}
				this.idList = idArr.toString()
				this.cartSubmit = cartSubmit
			},
			// 请求购物车列表
			getCartList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Cart/cart_list',
				    method:'POST',
				    data:{
				       p:this.page
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.cartArr = res.data.data.cart_item_top
							this.allNum = res.data.data.cart_item_top[0].cart_item.length
							let DataArr = res.data.data.cart_item_top[0].cart_item
							let price = 0
							let idArr = []
							let goodsId = []
							let cartSubmit = []
							for (let i = 0; i < DataArr.length; i++) {
								price = price + parseFloat(DataArr[i].sub_total)
								idArr.push(DataArr[i].cart_item_id)
								goodsId.push(DataArr[i].goods_id)
								cartSubmit.push({
									cart_item_id:DataArr[i].cart_item_id,
									goods_num:DataArr[i].buy_num
								})
							}
							this.totalPrice = price
							this.allId = idArr
							this.listOrder = cartSubmit
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.cart{
	width: 100vw;
	min-height: 100vh;
	background-color: #f6f6f6;
	.cart-num{
		color: #333;
		font-size: 28upx;
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cart-box{
		width: 710upx;
		margin: 0 auto;
		border-radius: 20upx;
		background-color: #fff;
		.top{
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e5e5e5;
			padding: 0 30upx;
			text{
				color: #333;
				font-size: 28upx;
			}
		}
		.goods-list{
			padding: 0 30upx;
			padding-top: 20upx;
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 20upx;
				.goods-data{
					display: flex;
					justify-content: space-between;
					>image{
						width: 150upx;
						height: 150upx;
						margin-right: 20upx;
					}
					.right{
						display: flex;
						flex-direction: column;
						.right-top{
							display: flex;
							justify-content: space-between;
							text:nth-child(1){
								font-size: 26upx;
								color: #333;
								width: 400upx;
								overflow: hidden;
								 -webkit-line-clamp: 1;
								 text-overflow: ellipsis;
								 display: -webkit-box;
								 -webkit-box-orient: vertical;
							}
							text:nth-child(2){
								font-size: 22upx;
								color: #999;
							}
						}
						.right-center{
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-wrap: wrap;
							width: 420upx;
							margin: 8upx 0;
							.tag{
								width: 105upx;
								height: 32upx;
								display: flex;
								align-items: center;
								justify-content: center;
								color: $zhuti-color;
								font-size: 20upx;
								margin-bottom: 5upx;
							}
						}
						.right-btm{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.price{
								font-size: 24upx;
								color: #333;
							}
							.count-box{
								display: flex;
								align-items: center;
								justify-content: center;
								width: 200upx;
								height: 50upx;
								border-radius: 20upx;
								border: 1upx solid #e4e4e4;
								input{
									width: 90upx;
									height: 50upx;
									background-color: #f6f6f6 ;
									text-align: center;
								}
								.count-box-left,.count-box-right{
									width: 50upx;
									height: 50upx;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}
				}
			}

		}
	}
	.btm-btn{
		width: 100vw;
		background-color: #fff;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx 0 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		.right{
			display: flex;
			align-items: center;
			.right-txt{
				margin-right: 20upx;
				font-size: 28upx;
				text:first-child{
					color: #000;
					font-weight: 600;
				}
				text:last-child{
					color: red;
					font-weight: 600;
				}
			}
			button{
				width: 150upx;
				height: 60upx;
				font-size: 26upx;
			}
		}
	}
}
</style>
